<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>常规布局</title>

    <!-- 版本：0.0.2 -->
    <link href="https://cdn.bootcss.com/minireset.css/0.0.2/minireset.min.css" rel="stylesheet">

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">


    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/pc/default.css">
    <link rel="stylesheet" type="text/css" href="css/wap/default.css">
    <link rel="stylesheet" type="text/css" href="css/theme.css">

    <style type="text/css">
    </style>

</head>
<body>
<header class="header">
    <div class="logo ">
        <div class="logoimg"></div>
        <div class="smallmenu">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="cover"></div>
    </div>
    <ul class="menu _bg fr">
        <li class="item"><a class="_active" href="">首页</a></li>
        <li class="item"><a href="">课程</a></li>
        <li class="item"><a href="">实训室</a></li>
        <li class="item"><a href="">我的</a></li>
    </ul>
</header>

<div class="wrap">


<!-- 轮播图 -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://via.placeholder.com/860X500" alt="...">
      <div class="carousel-caption">
        aaa
      </div>
    </div>
    <div class="item">
      <img src="http://via.placeholder.com/860X500" alt="...">
      <div class="carousel-caption">
        bbb
      </div>
    </div>

    <div class="item">
      <img src="http://via.placeholder.com/860X500" alt="...">
      <div class="carousel-caption">
        ccc
      </div>
    </div>
    
  </div>
</div>

<div class="line1"></div>
<!-- 消息通知 -->
<ul class="list-group">
  <li class="list-group-item">message<span class="fr glyphicon glyphicon-chevron-right"></span></li>
  <li class="list-group-item">message<span class="fr glyphicon glyphicon-chevron-right"></span></li>
  <li class="list-group-item">message<span class="fr glyphicon glyphicon-chevron-right"></span></li>
</ul>

<!-- 表单提交 -->

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">表单提交</h3>
  </div>
  <div class="panel-body">
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <label for="firstname" class="col-xs-3 control-label">用户名</label>
                <div class="col-xs-9">
                    <input type="text" class="form-control" id="firstname" 
                           placeholder="请输入用户名">
                </div>
            </div>
            <div class="form-group">
                <label for="lastname" class="col-xs-3 control-label">密码</label>
                <div class="col-xs-9">
                    <input type="password" class="form-control" id="lastname" 
                           placeholder="请输入密码">
                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-offset-3 col-xs-9">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"> 请记住我
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-offset-3 col-xs-9">
                    <button type="submit" class="btn btn-default">登录</button>
                </div>
            </div>
        </form>
  </div>
</div>

<!-- grid 布局 -->
<div class="line1"></div>
<div class="">
    <ul class="around h40">
        <li class="flex center"><span class="glyphicon glyphicon-inbox"></span></li>
        <li class="flex center"><span class="glyphicon glyphicon-inbox"></span></li>
        <li class="flex center"><span class="glyphicon glyphicon-inbox"></span></li>
    </ul>
    <ul class="around h40">
        <li class="flex center"><span class="glyphicon glyphicon-tags"></span></li>
        <li class="flex center"><span class="glyphicon glyphicon-tags"></span></li>
    </ul>
</div>

<div class="line1"></div>

<!-- 列表内容 -->

<!-- 缩略图 -->
<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://via.placeholder.com/171X180" alt="...">
    </a>
  </div>  
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://via.placeholder.com/171X180" alt="...">
    </a>
  </div>  
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://via.placeholder.com/171X180" alt="...">
    </a>
  </div>  
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://via.placeholder.com/171X180" alt="...">
    </a>
  </div>
</div>


<!-- 缩略图自定义内容 -->
<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail wow slideInLeft" data-wow-duration="1s"  data-wow-offset="10"  data-wow-iteration="1">
      <img src="http://via.placeholder.com/242X200" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>one piece</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>  

  <div class="col-sm-6 col-md-4">
    <div class="thumbnail wow slideInUp" data-wow-duration="1s"  data-wow-offset="10"  data-wow-iteration="1">
      <img src="http://via.placeholder.com/242X200" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>one piece</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div> 

   <div class="col-sm-6 col-md-4">
    <div class="thumbnail wow slideInRight" data-wow-duration="1s"  data-wow-offset="10"  data-wow-iteration="1">
      <img src="http://via.placeholder.com/242X200" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>one piece</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>

</div>



</div>
</body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/wow/1.1.2/wow.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

    new WOW().init();

})

</script>
</html>